<template>
  <section>
      <div class="bii-box-section">
        <el-row :gutter="20">
            <el-col :span="18">
                <div class="tab-nav">
                    <div @click="handleType('date')" class="item" :class="{'active':(listQuery.type=='date')}">今日数据</div>
                    <div @click="handleType('month')" class="item" :class="{'active':(listQuery.type=='month')}">本月数据</div>
                    <div @click="handleType('total')" class="item" :class="{'active':(listQuery.type=='total')}">累计数据</div>
                </div>

                <el-row :gutter="20" style="margin-top:20px;">
                    <el-col :span="6">
                        <el-card class="box-card box">
                            提交审核商品
                            <p class="value">
                                {{ form.submitProductNum }}
                            </p>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="box-card box">
                            审核通过商品
                            <p class="value">
                                {{ form.auditProductNum }}
                            </p>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="box-card box">
                            待结算金额
                            <p class="value">
                                <span class="currency">￥</span>{{ form.waitSettleMoney }}
                            </p>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="box-card box">
                            已结算金额
                            <p class="value">
                                <span class="currency">￥</span>{{ form.settledMoney }}
                            </p>
                        </el-card>
                    </el-col>
                </el-row>

                <el-row :gutter="20" style="margin-top:20px;">
                    <el-col :span="12">
                        <el-card class="box-card box">
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <p class="value">
                                        {{ form.orderProductNum }}
                                    </p>
                                    成交商品数
                                </el-col>
                                <el-col :span="8">
                                    <p class="value">
                                        <span class="currency">￥</span>{{ form.productIncome }}
                                    </p>
                                    商品收人
                                </el-col>
                                <el-col :span="8">
                                    <p class="value">
                                        {{ form.orderNum }}
                                    </p>
                                    成交单数
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card class="box-card box">
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <p class="value3">
                                        {{ form.refundProductNum }}
                                    </p>
                                    退款商品数
                                </el-col>
                                <el-col :span="8">
                                    <p class="value3">
                                        <span class="currency">￥</span>{{ form.refundMoney }}
                                    </p>
                                    退款金额
                                </el-col>
                                <el-col :span="8">
                                    <p class="value3">
                                        {{ form.refundOrderNum }}
                                    </p>
                                    退款单数
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
                <div class="title">销量统计</div>
                <el-card class="box-card">
                    <v-chart autoresize :options="saleReport"/>
                </el-card>
            </el-col>
            <el-col :span="6">
                <div class="title">
                    商品排行榜
                    <div class="more" @click="viewProduct()">更多>></div>
                </div>
                <el-card class="box-card">
                    <div class="goods-list base-section">
                        <div class="goods-head">
                            <div class="row-t row-l">
                            排名
                            </div>
                            <div class="row-t row-c">
                            <span>商品</span>
                            </div>
                            <div class="row-t row-r">
                            销量
                            </div>
                        </div>
                        <template v-for="(item, idx) in saleList">
                            <div class="row" :key="item.id" @click="toProductDetail(item)">
                                <div class="row-l">
                                {{ idx+1 }}
                                </div>
                                <div class="row-c">
                                <div class="pic">
                                <img :src="item.listImgUrl" />
                                </div>
                                <div class="title ellipsis2">
                                {{ item.title }}
                                </div>
                                </div>
                                <div class="row-r">
                                {{ item.saleCount }}
                                </div>
                            </div>
                        </template>
                    </div>
                </el-card>
            </el-col>
        </el-row>
      </div>
  </section>
</template>

<script>
    import ECharts from 'vue-echarts/components/ECharts'
    import 'echarts/lib/chart/line'
    import 'echarts/lib/chart/pie'
    import 'echarts/lib/chart/bar'
    import 'echarts/lib/component/title'
    import 'echarts/lib/component/polar'
    import 'echarts/lib/component/tooltip'
    import 'echarts/lib/component/legend'
    import {
        admin_summary
    } from '../../api/user';
    import {
        product_list,
        product_sale_count
    } from '../../api/product';
    export default {
        components: {
            'v-chart': ECharts
        },
        data() {
            return {
                saleReport: {
                    color: ['#1990FF', '#3DCCCC'],
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['本月', '上个月']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '本月',
                            type: 'line',
                            stack: '销量',
                            data: []
                        },
                        {
                            name: '上个月',
                            type: 'line',
                            stack: '销量',
                            data: []
                        },
                    ]
                },
                yearList: [],
                listQuery: {
                    type: "date",
                },
                list: [],
                total: 0,
                form: {
                    auditProductNum: 0,
                    submitProductNum: 0,
                    waitSettleMoney: 0,
                    settledMoney: 0,
                    orderProductNum: 0,
                    productIncome: 0,
                    orderNum: 0,
                    refundProductNum: 0,
                    refundMoney: 0,
                    refundOrderNum: 0,
                },
                saleList: []
            }
        },
        mounted() {
        },
        created() {
            this.getData();
            this.getSaleList();
            this.getProductSaleCount();
        },
        methods: {
            handleType(type) {
                this.listQuery.type = type;
                this.getData();
            },
            exportExcel() {

            },
            viewProduct() {
                this.$router.push("/goods_list") 
            },
            getData() {
                admin_summary(this.listQuery).then((res)=>{
                    this.form = res.data;
                }).catch((err)=>{

                })
            },
            toProductDetail(row) {
                let {href} = this.$router.resolve({path: '/goods_detail?id=' + row.id});
                window.open(href, '_blank');

            },
            getSaleList() {
                product_list({
                    pageNum: 1,
                    pageSize: 10,
                    getSaleCount: 1,
                    orderCol:"sale_count",
                    orderAsc: "descending"
                }).then((res)=>{
                    let list = res.data.list;
                    this.saleList = [];
                    if(list && list.length > 0) {
                        list.forEach((item)=>{
                            if(item.saleCount > 0) {
                                this.saleList.push(item);
                            }
                        })
                    }
                }).catch((err)=>{

                })
            },
            getProductSaleCount() {
                product_sale_count().then((res)=>{
                    this.saleReport.xAxis.data = res.data.day;
                    this.saleReport.series[0].data = res.data.valueMonth;
                    this.saleReport.series[1].data = res.data.valueOfLastMonth;
                }).catch((err)=>{

                })
            }
        }
    };
</script>
<style lang="scss" scoped>

    .bii-box-section {
        .echarts {
            width: 100%;
        }
        .goods-list {
            padding: 0px 10px 10px;

            .row-t {
                line-height: 30px;
                color: rgb(153, 153, 153);
                font-size: 14px;
                height: auto;
                -webkit-box-pack: center;
                justify-content: center;
            }

            .row-l {
                width: 48px;
                margin-right: 6px;
                font-size: 30px;
                text-align: center;
            }

            .row-c {
                -webkit-box-flex: 1;
                flex: 1 1 0%;
                height: auto;
                display: flex;
                -webkit-box-align: center;
                align-items: center;

                .title {
                    -webkit-box-flex: 1;
                    flex: 1 1 0%;
                    font-size: 14px;
                    line-height: 17px;
                    height:34px;
                }

                .pic {
                    width: 80px;
                    height: 80px;
                    border-radius: 4px;
                    margin-right: 17px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .row-r {
                line-height: 30px;
                color: rgb(153, 153, 153);
                font-size: 14px;
                height: auto;
            }

            .row {
                display: flex;
                height: 100px;
                margin-bottom: 9px;
                border-radius: 4px;
                -webkit-box-align: center;
                align-items: center;
                cursor: pointer;
            }

            .goods-head {
                display: flex;
                padding: 10px 0px 4px;

                .row-l {
                    font-size:14px;
                }
            }
        }
        .title {
            line-height: 60px;
            height: 60px;
            font-size: 16px;
            font-weight: 700;
            position: relative;

            .more {
                padding-right: 14px;
                font-size: 14px;
                cursor: pointer;
                display:inline-block;
                float:right;
            }
        }
        // padding: 80px;
        // height: 100%;
        // background: #fff;
        // -webkit-box-sizing: border-box;
        // box-sizing: border-box;
        // overflow: auto;

        .box {
            text-align:center;
            font-size: 14px;
            color: rgb(153, 153, 153);
            font-weight: 700;

            .value {
                font-size: 28px;
                line-height: 33px;
                color: #F4222D;
                height:33px;
                
                .currency {
                    font-size:14px;
                }
            }

            .value3 {
                font-size: 28px;
                line-height: 33px;
                color: #000000;
                height:33px;
                
                .currency {
                    font-size:14px;
                }
            }
        }
    }
</style>
